<template>
	<view class="box" v-if="show">
		<view class="picker-box">
			<view class="title">{{$t('home.Please-select-time')}}</view>
			<picker-view style="width: 100%;" class="sleepPage-time-picker" :indicator-style="indicatorStyle"
				:value="timeValue" @change="handleTimeChange">
				<!-- 第一列：小时选择  -->
				<picker-view-column>
					<view class="border-rad1" v-for="(hour, index) in hours" :key="index" :class="[
			        'sleepPage-time-picker_item',
			        { selected: timeValue[0] === index },
			      ]">
						{{ hour }}
						<span class="sleepPage-time-picker_item-span" v-if="timeValue[0] === index"></span>
					</view>
				</picker-view-column>
				<!-- 第二列：分钟选择 -->
				<picker-view-column>
					<view class="border-rad2" v-for="(minute, index) in minutes" :key="index" :class="[
			        'sleepPage-time-picker_item',
			        { selected: timeValue[1] === index },
			      ]">
						{{ minute }}
						<span class="sleepPage-time-picker_item-span" v-if="timeValue[1] === index"></span>
					</view>
				</picker-view-column>
			</picker-view>
			<view class="btn-box flex_a">
				<view class="btn-item flex_col" @click="close">{{$t('home.btn-cancel')}}</view>
				<view class="btn-item flex_col active" @click="hanleConfirm">{{$t('home.btn-Confirm-appointment')}}
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		// props: {
		// 	show: {
		// 		type: Boolean,
		// 		default: false
		// 	}
		// },
		data() {
			return {
				show: false,
				timeValue: [6, 6], // 默认选中的时间值，[小时索引, 分钟索引]
				indicatorStyle: "height: 30px;background: #d4d4d4;z-index: 0;",
				hours: [...Array(24).keys()].map((n) => n.toString().padStart(2, "0")), // 生成小时选项数组
				minutes: [...Array(60).keys()].map((n) => n.toString().padStart(2, "0")), // 生成分钟选项数组
			};
		},
		methods: {

			// 获取当前时间时分
			getDateTimeRange() {
				const now = new Date(); // 获取当前时间
				const hours = now.getHours(); // 获取小时
				const minutes = now.getMinutes(); // 获取分钟

				this.timeValue = [hours, minutes];
			},
			open() {
				// this.$refs.timePicker.open();
				this.show = true
				this.getDateTimeRange();
			},
			handleTimeChange(e) {
				this.timeValue = e.detail.value; // 更新选择的时间值
				// 处理选择后的逻辑，例如更新界面显示的时间
				// console.log(
				// 	"Selected Time:",
				// 	this.hours[this.timeValue[0]],
				// 	":",
				// 	this.minutes[this.timeValue[1]]
				// );
			},
			hanleConfirm() {
				// this.$refs.timePicker.close();
				this.show = false
				this.$emit('confirm', this.timeValue);
			},
			close() {
				this.show = false
				// this.$refs.timePicker.close();
			},
		}

	}
</script>

<style scoped lang="scss">
	.box {
		background-color: rgba(0, 0, 0, 0.3);
		height: 100vh;
		width: 100%;
		position: absolute;
		bottom: 0%;
		left: 0;
	}

	.picker-box {
		width: 585rpx;
		background: #fff;
		padding: 85rpx 80rpx 70rpx 80rpx;
		box-sizing: border-box;
		border-radius: 30rpx;
		position: absolute;
		top: 30%;
		left: 50%;
		// box-shadow: 10px 10px 20px 5px rgba(0, 0, 0, 0.3);
		transform: translate(-50%);

		.title {
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
			line-height: 36rpx;
			text-align: center;
		}

		.border-rad1 {
			border-top-left-radius: 10rpx;
			border-bottom-left-radius: 10rpx;
		}

		.border-rad2 {
			border-top-right-radius: 10rpx;
			border-bottom-right-radius: 10rpx;
		}

		.btn-box {
			.btn-item {
				width: 244rpx;
				height: 80rpx;
				background: #E4E4E4;
				border-radius: 15rpx;
				text-align: center;
			}

			.active {
				background: #AF9453;
				color: #fff;
				margin-left: 20rpx;
			}
		}
	}

	.sleepPage-time-picker-box {
		display: flex;
		margin-bottom: 10px;
	}

	.sleepPage-time-picker {
		height: 350rpx;
		/* 设置选择器的高度 */
		/* 设置选择器的宽度 */
		margin-top: 30rpx;
		margin-bottom: 40rpx;
	}

	.selected {
		background: #d4d4d4;
	}

	.sleepPage-time-picker_item {
		text-align: center;
		height: 30px;
		line-height: 30px;
		position: relative;
	}

	.sleepPage-time-picker_item-span {
		padding-left: 10px;
		position: absolute;
		right: 15px;
	}
</style>